<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> 展 示 </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/resource/layui/css/layui.css"
          media="all">
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/resource/js/jquery-3.6.0.min.js"></script>

</head>
<body>
<div class="layui-form">
    <div class="layui-input-inline">
        <label for="searchType"></label>
        <select name="searchType" lay-filter="searchType" id="searchType">
            <option value="0">订单编号</option>
            <option value="1">客户名称</option>
            <option value="2">产品名称</option>
        </select>
    </div>

    <div class="layui-inline">
        <label for="searchReload"></label>
        <input class="layui-input" name="searchValue" id="searchReload" autocomplete="off">
    </div>

    <button class="layui-btn" data-type="reload" id="searchButton">搜索</button>
</div>

<table class="layui-hide" id="userListTable" lay-filter="wholeTable"></table>


<script type="text/html" id="firstTool">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-border-green layui-btn-sm" lay-event="add">新增<i class="layui-icon layui-icon-add-1"></i></button>
        <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" lay-event="edit">编辑<i class="layui-icon layui-icon-edit"></i></button>
        <button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="delete">批量删除<i class="layui-icon layui-icon-delete"></i></button>
        <button class="layui-btn layui-btn-primary layui-border-black layui-btn-sm" lay-event="refresh">刷新<i class="layui-icon layui-icon-refresh-3"></i></button>
    </div>
</script>

<script src="<%=request.getContextPath()%>/resource/layui/layui.js"
        charset="utf-8"></script>


<script>
    layui.use(['table','util','laytpl','layer'], function() {
        var table = layui.table;
        var layer = layui.layer;

        table.render({
            elem : '#userListTable',
            url : 'userListServlet',
            toolbar : '#firstTool' //开启头部工具栏，并为其绑定左侧模板
            ,
            id : 'tableReload',
            defaultToolbar : ['filter', 'exports', 'print'],
            title : '测试列表',
            cols : [ [ {
                type : 'checkbox',
                fixed : 'left'
            }, {
                field : 'id',
                title : '编号',
                unresize : true,
                sort : true
            }, {
                field : 'test_name',
                title : '测试名称'
            }, {
                field : 'age',
                title : '年龄',
                sort : true
            }, {
                field : 'user_addr',
                title : '地址'
            } ] ]
        });

        //重新加载
        var $ = layui.$, active = {
            reload : function() {
                var searchReload = $('#searchReload');
                var searchType = $('#searchType');
                //执行重载
                table.reload('tableReload', {
                    page : {
                        curr : 1
                        //重新从第 1 页开始
                    },
                    where : {
                        searchType : searchType.val(),
                        searchValue : searchReload.val()
                    }
                });
            }
        };

        $('#searchButton').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //头工具栏事件
        table.on('toolbar(wholeTable)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        content: 'order/add',
                        skin: 'layui-layer-molv',
                        area: ['600px', '600px']
                    });
                    break;
                case 'edit':
                    if(data.length > 1){
                        layer.msg('只能选择一个数据进行修改',{
                            icon : 2,
                            time : 2000
                        });
                        return false;
                    } else if(data.length === 0){
                        layer.msg('请选择一个数据进行修改',{
                            icon : 2,
                            time : 2000
                        });
                        return false;
                    }
                    var orderId = data[0].orderId;
                    layer.open({
                        type: 2,
                        content: 'order/update?orderId='+orderId,
                        skin: 'layui-layer-molv',
                        area: ['600px', '600px'],
                    });
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择数据进行删除',{
                            icon : 2,
                            time : 2000
                        });
                        return false;
                    }
                    var orderIds = [];
                    for(var i=0 ; i < data.length ; i++){
                        orderIds.push(data[i].orderId);
                    }
                    $.post("order/deleteAll?orderIds="+orderIds,function(obj){
                        var json = JSON.parse(obj);
                        if (json.result === 1) {
                            layer.msg(json.msg, {
                                icon : 1,
                                time : 2000
                            },function(){
                                location.reload();
                            });
                            return false;
                        } else {
                            layer.msg(json.msg, {
                                icon : 2,
                                time : 2000
                            });
                            return false;
                        }
                    });
                    return false;

                case 'refresh':
                    location.reload();
                    break;
            }
        });

    });
</script>

</body>
</html>